<template>
    <div class="tabbar">
        <div class="center circle share">
            <button
                class="tab material-icons-outlined center"
                @click="shareClick"
                style="color: #4caf50"
            >
                share
            </button>
        </div>
        <div class="center circle calenar">
            <button
                class="tab material-icons-outlined center"
                @click="toCalendar"
                style="color: #ec8c32"
            >
                date_range
            </button>
        </div>
        <div class="center circle edit">
            <button
                class="tab material-icons-outlined center"
                @click="$emit('changeLike', !isLiked)"
                :style="{
                    color: isLiked ? '#ff005e' : '#5f6368',
                }"
            >
                {{ isLiked ? "favorite" : "favorite_border" }}
            </button>
        </div>
        <div class="center circle user">
            <button
                class="tab material-icons-outlined center"
                @click="toUser"
                style="color: #1fa2e5"
            >
                account_circle
            </button>
        </div>
    </div>
</template>

<script>
import $store from "@/store/index";
export default {
    props: ["showingId"],
    computed: {
        isLiked() {
            const result =
                $store.state.user.userInfo.UserInfo &&
                $store.state.user.userInfo.UserInfo.likeArray.includes(
                    this.showingId
                );
            console.log("isLiked", result, this.showingId);
            return result;
        },
    },
    methods: {
        shareClick() {
            this.$emit("share");
        },
        toEditor() {
            wx.navigateTo({
                url: "/package/editor/index",
            });
        },
        toUser() {
            wx.navigateTo({
                url: "/package/user/index",
            });
        },
        toCalendar() {
            wx.navigateTo({
                url: "/package/calendar/index",
            });
        },
    },
    data() {
        return {};
    },
};
</script>

<style lang="less" scoped>
.tabbar {
    .circle {
        position: relative;
        background-color: white;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
            0 2px 4px -1px rgba(0, 0, 0, 0.06);
        border-radius: 50%;
        height: 106rpx;
        width: 106rpx;
        font-size: 64rpx;
        .center {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        .tab {
            text-shadow: 0 0 1px;
            background: transparent;
            &:after {
                display: none;
            }
        }
    }
    padding: 32rpx 0;
    width: 100%;
    height: 110rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
}
.shareTable {
    height: 40%;
    width: 100%;
}
</style>
